<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../../docs/image/image2D.png">
    <script src="../../build/image2D.js"></script>
    <title>image2D - 用例测试 - 轮询动画基础</title>
</head>

<body>
    <h2>
        温馨提示
    </h2>
    <p>
        请查看浏览器控制台！
    </p>
    <script>

        // 启动两个动画
        var stop = $$.animation(function (deep) {
            console.log("动画一：" + deep);
        }, 10000, function (deep) {
            console.warn('end! ' + deep);
        });

        $$.animation(function (deep) {
            console.log("动画二：" + deep);
        }, 5000, function (deep) {
            console.warn('end! ' + deep);
        });

        // 提前停止第一个
        setTimeout(function () {
            stop();
        }, 1000);
    </script>

    <span>ease</span>
    <span>ease-in</span>
    <span>ease-in-out</span>
    <span>ease-out</span>
    <span>linear</span>
    <span>[0.1, 0.9, 0.9, 0.1]</span>

    <script>

        var spans = $$('span');

        $$.animation(function (deep) {
            spans[0].style.width = (deep * 1000) + "px";
        }, 10000, "ease");

        $$.animation(function (deep) {
            spans[1].style.width = (deep * 1000) + "px";
        }, 10000, "ease-in");

        $$.animation(function (deep) {
            spans[2].style.width = (deep * 1000) + "px";
        }, 10000, "ease-in-out");

        $$.animation(function (deep) {
            spans[3].style.width = (deep * 1000) + "px";
        }, 10000, "ease-out");

        $$.animation(function (deep) {
            spans[4].style.width = (deep * 1000) + "px";
        }, 10000, "linear");

        $$.animation(function (deep) {
            console.log(deep);
            spans[5].style.width = (deep * 1000) + "px";
        }, 10000, [0.1, 0.9, 0.9, 0.1]);

    </script>

</body>

<style>
    span {
        display: block;
        width: 0px;
        height: 30px;
        line-height: 30px;
        background-color: rgb(255, 115, 0);
        margin: 10px;
        white-space: nowrap;
        color: aliceblue;
        text-indent: 2em;
    }
</style>

</html>
